<template>
  <div id="flight-order-detail">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/hotel/orders">酒店订单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="order-tab"
            data-bs-toggle="tab"
            href="#orderDetailTab"
            role="tab"
            aria-controls="home"
            aria-selected="true"
            >订单内容</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="pnr-tab"
            data-bs-toggle="tab"
            href="#orderCommentTab"
            role="tab"
            aria-controls="comment"
            aria-selected="false"
            >留言({{ commentCount }})</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div
          class="tab-pane fade show active"
          id="orderDetailTab"
          role="tabpanel"
          aria-labelledby="order-tab"
        >
          <div class="card">
            <table class="table table-sm table-striped table-hover">
              <thead>
                <tr>
                  <th>订单号</th>
                  <th>上级订单</th>
                  <th>客户</th>
                  <th>预订人/处理人</th>
                  <th>收款方式/备注</th>
                  <th>预订渠道</th>
                  <th>供应商</th>
                  <th>支付方式</th>
                  <th>收款状态</th>
                  <th>服务费</th>
                  <th>总金额</th>
                  <th>总成本</th>
                  <th>利润</th>
                  <th>订单状态</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    {{ detail.orderNo }}
                    <span
                      class="text-danger"
                      v-if="detail.hotelOrderType === 4"
                    >
                      退
                    </span>
                  </td>
                  <td>
                    {{ detail.parentOrderNo }}
                  </td>
                  <td>
                    {{ detail.customerName }}
                    <span class="text-danger small">{{
                      detail.customerCode
                    }}</span>
                    /{{ detail.costCenter }} /{{ detail.projectName }}
                  </td>
                  <td>{{ detail.operator }}/{{ detail.ticketer }}</td>
                  <td>
                    {{ getPayTypeDesc(detail.payType) }}/{{ detail.payRemark }}
                  </td>
                  <td>
                    <span v-if="detail.reservationChannel === 0">人工</span>
                    <span v-else-if="detail.reservationChannel === 1"
                      >代理通</span
                    >
                  </td>
                  <td>{{ detail.supplierName }}</td>
                  <td>{{ detail.paymentMethodName }}</td>
                  <td>
                    <span class="text-danger" v-if="detail.payStatus === 0"
                      >未收款</span
                    >
                    <span class="text-info" v-else-if="detail.payStatus === 1"
                      >已收款</span
                    >
                    <span
                      class="text-primary"
                      v-else-if="detail.payStatus === 2"
                      >已销账</span
                    >
                  </td>
                  <td>{{ detail.serviceCharge }}</td>
                  <td>{{ detail.totalAmount }}</td>
                  <td>{{ detail.totalCost }}</td>
                  <td>{{ detail.profit }}</td>
                  <td>{{ getStatusDesc(detail.status) }}</td>
                </tr>
              </tbody>
            </table>
            <div class="card-body bg-info text-white py-0">酒店信息</div>
            <table class="table table-striped table-hover table-sm small">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>房型</th>
                  <th>到店日期</th>
                  <th>离店日期</th>
                  <th>房间数</th>
                  <th>销售价</th>
                  <th>底价</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ detail.hotelName }}</td>
                  <td>{{ detail.roomType }}</td>
                  <td>{{ detail.checkInDate }}</td>
                  <td>{{ detail.checkOutDate }}</td>
                  <td>{{ detail.roomCount }}</td>
                  <td>{{ detail.price }}</td>
                  <td>{{ detail.bottomPrice }}</td>
                </tr>
              </tbody>
            </table>
            <div
              class="card-body bg-info text-white py-1 small"
              v-if="detail.hotelId > 0"
            >
              每日价格信息
            </div>
            <div class="card-body py-1 small" v-if="detail.hotelId > 0">
              <div class="card-group">
                <div
                  class="card bg-white mb-1"
                  style="max-width: 10rem"
                  v-for="(rp, index) of detail.prices"
                  :key="index"
                >
                  <div class="card-body py-0 px-1">
                    <h5 class="card-title">{{ rp.effectiveDate }}</h5>
                    <p class="card-text">
                      {{ rp.inclusiveAmount }}
                      <span
                        >{{ getMealTypeDesc(rp.mealType)
                        }}{{ rp.mealCount }}份</span
                      >
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body bg-info text-white py-0">客人信息</div>
            <table class="table table-striped table-hover table-sm small">
              <thead>
                <tr>
                  <th>姓名</th>
                </tr>
              </thead>
              <tbody>
                <template v-if="detail.passengers.length > 0">
                  <tr v-for="info of detail.passengers">
                    <td>{{ info.name }}</td>
                  </tr>
                </template>
                <template v-else>
                  <tr>
                    <td>{{ detail.passengerName }}</td>
                  </tr>
                </template>
              </tbody>
            </table>
            <div class="card-body py-0">
              备注: {{ detail.remark }}
              <template v-if="detail.status !== 2 && detail.status !== 4">
                <a
                  href="javascript:void(0)"
                  @click.stop="editRemark()"
                  class="ms-2 small"
                  title="修改备注"
                  >修改</a
                >
              </template>
              <ul class="list-inline row">
                <li class="list-inline-item me-auto">
                  最晚到店时间: {{ detail.lastArriveTime }}
                </li>
                <li class="list-inline-item me-auto">
                  联系人: {{ detail.linkman }}
                </li>
                <li class="list-inline-item me-auto">
                  联系电话: {{ detail.contactPhone }}
                </li>
              </ul>
              <ul class="list-inline row">
                <li class="list-inline-item me-auto">
                  价格校验:
                  {{ showPriceCheckedStatus(detail.priceCheckedStatus) }},
                  {{ detail.priceCheckedTime }}
                </li>
                <li class="list-inline-item me-auto">
                  指定审批人: {{ detail.specifiedApprover }}
                </li>
                <li class="list-inline-item me-auto">
                  审批结果: {{ detail.approvalStatus }},
                  {{ detail.approvalDenyReason }}
                </li>
                <li class="list-inline-item me-auto">
                  合规性校验: {{ detail.violationStatus }},
                  {{ detail.violationReason }}
                </li>
              </ul>
            </div>
            <div
              class="card-body bg-info text-white py-1 small"
              v-if="detail.hotelId > 0"
            >
              供应商订单信息
            </div>
            <div class="card-body py-1 small" v-if="detail.hotelId > 0">
              <div class="card-group">
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单号：{{ detail.supplierOrderNo }}
                  </div>
                </div>
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单状态：{{ detail.supplierOrderStatus }}
                  </div>
                </div>
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单确认方式：{{ detail.supplierConfirmType }}
                  </div>
                </div>
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单确认号：{{ detail.supplierConfirmNo }}
                  </div>
                </div>
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单拒绝类型：{{ detail.supplierRejectType }}
                  </div>
                </div>
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单拒绝原因：{{ detail.supplierRejectReason }}
                  </div>
                </div>
                <div class="card bg-white mb-3" style="max-width: 10rem">
                  <div class="card-body py-0 px-1">
                    订单备注：{{ detail.supplierRemark }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-body small">
              <div class="d-flex flex-row justify-content-around">
                <template
                  v-if="
                    detail.status === 0 ||
                    detail.status === 10 ||
                    detail.status === 20 ||
                    detail.status === 1
                  "
                >
                  <button
                    class="btn btn-warning btn-sm ms-auto me-auto"
                    @click.stop="updateChannel()"
                  >
                    预订渠道
                  </button>
                  <button
                    class="btn btn-info btn-sm ms-auto me-auto"
                    @click.stop="editSupplier()"
                  >
                    更改供应商
                  </button>
                  <button
                    class="btn btn-info btn-sm ms-auto me-auto"
                    @click.stop="editPayment()"
                  >
                    更改支付方式
                  </button>
                  <button
                    class="btn btn-info btn-sm ms-auto me-auto"
                    @click.stop="editPrice()"
                  >
                    修改价格
                  </button>

                  <button
                    class="btn btn-primary btn-sm ms-auto me-auto"
                    @click.stop="submitOrder()"
                    v-if="detail.status === 0"
                  >
                    提交订单
                  </button>
                  <button
                    class="btn btn-primary btn-sm ms-auto me-auto"
                    @click.stop="approveOrder()"
                    v-if="detail.status === 10"
                  >
                    审批订单
                  </button>
                  <button
                    class="btn btn-primary btn-sm ms-auto me-auto"
                    @click.stop="processOrder()"
                    v-if="detail.status === 20"
                  >
                    处理订单
                  </button>
                  <button
                    class="btn btn-primary btn-sm ms-auto me-auto"
                    @click.stop="finishOrder()"
                    v-if="detail.status === 1"
                  >
                    处理完毕
                  </button>

                  <button
                    class="btn btn-danger btn-sm ms-autome-auto"
                    @click.stop="cancelOrder()"
                  >
                    取消订单
                  </button>
                </template>

                <template v-if="detail.status === 2 && detail.payStatus !== 2">
                  <button
                    class="btn btn-danger btn-sm ms-2"
                    @click.stop="rollbackStatus()"
                    v-if="isAdmin"
                  >
                    回滚
                  </button>
                </template>
                <template v-if="detail.hotelOrderType === 0">
                  <router-link
                    :to="`/hotel/order?hotelOrderId=` + this.id"
                    class="btn btn-info btn-sm ms-auto"
                    >复制</router-link
                  >
                  <template v-if="detail.status === 2">
                    <router-link
                      :to="`/hotel/order?mode=1&hotelOrderId=` + this.id"
                      class="btn btn-danger btn-sm ms-auto"
                      >退单</router-link
                    >
                  </template>
                </template>
              </div>
            </div>
          </div>
          <div
            class="card"
            v-if="detail.hotelId > 0 && isAdmin && detail.status === 1"
          >
            <div class="card-header">调试代码</div>
            <div class="card-body small">
              <div class="d-flex flex-row justify-content-around">
                <button
                  class="btn btn-info btn-sm ms-auto me-auto"
                  @click.stop="checkAvail()"
                >
                  可定检查
                </button>
                <button
                  class="btn btn-info btn-sm ms-auto me-auto"
                  @click.stop="createSupplierHotelOrder()"
                >
                  创建供应商订单
                </button>
                <button
                  class="btn btn-info btn-sm ms-auto me-auto"
                  @click.stop="cancelSupplierOrder()"
                >
                  取消供应商订单
                </button>
                <button
                  class="btn btn-primary btn-sm ms-auto me-auto"
                  @click.stop="syncOrderDetail()"
                >
                  同步订单详情
                </button>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header small">
              <a
                href="javascript:void(0)"
                class="float-end"
                @click.stop="viewHistory()"
                >查看历史记录</a
              >
            </div>
            <table class="table table-sm table-striped small">
              <tr>
                <td>操作员</td>
                <td>内容</td>
                <td>时间</td>
              </tr>
              <tr v-for="info in histories" :key="info.id">
                <td>{{ info.operator }}</td>
                <td>{{ info.content }}</td>
                <td>{{ info.createTime }}</td>
              </tr>
            </table>
          </div>
        </div>
        <div
          class="tab-pane fade"
          id="orderCommentTab"
          role="tabpanel"
          aria-labelledby="comment-tab"
        >
          <order-comment
            :orderType="2000"
            :orderId="this.id"
            :commentCount.sync="commentCount"
          ></order-comment>
        </div>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
    <hotel-update-price-modal
      ref="hotelUpdatePriceModal"
    ></hotel-update-price-modal>
    <my-modal-confirm ref="confirmModal"></my-modal-confirm>
    <my-modal-channel-update ref="channelUpdateModal"></my-modal-channel-update>
  </div>
</template>

<script>
import { APP_FLIGHT_PATH, SUPPLIER_HOTEL } from "@/common/const.js";
import {
  showPayType,
  showPsgType,
  showPriceCheckedStatus,
} from "@/common/common.js";

import {
  searchHotelOrder,
  showHotelOrderStatus,
  showMealTypeDesc,
  searchHotelOrderHistory,
} from "@/api/hotel.js";
import {
  cancelHotelOrder,
  submitHotelOrder,
  approveHotelOrder,
  processHotelOrder,
  finishHotelOrder,
  checkHotelAvail,
  syncHotelOrderDetail,
  cancelSupplierHotelOrder,
  createSupplierHotelOrder,
} from "@/api/hotel.js";
import {
  updateHotelOrderChannel,
  updateHotelOrderSupplier,
  updateHotelOrderPayment,
  updateHotelOrderRemark,
  updateHotelOrderPrice,
} from "@/api/hotel.js";

import { rollbackHotelOrderStatus } from "@/api/admin.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalConfirm from "@/components/modal/my-modal-prompt-confirm.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import HotelUpdatePriceModal from "@/components/hotel-update-price-modal.vue";
import MyModalChannelUpdate from "@/components/modal/my-modal-channel-update.vue";
import OrderComment from "@/components/comment/order-comment.vue";

export default {
  components: {
    MyModalConfirm,
    MyModalPrompt,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    HotelUpdatePriceModal,
    MyModalChannelUpdate,
    OrderComment,
  },
  data() {
    return {
      detail: null,
      id: 0,
      orderNo: "",

      modalTitle: "",
      modalNullable: false,

      histories: [],

      commentCount: 0, //留言数量
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    psgCount: function () {
      if (this.detail !== null) {
        this.priceInfo.ticketCount = this.detail.passengers.length;
        return this.priceInfo.ticketCount;
      } else {
        this.priceInfo.ticketCount = 1;
        return 1;
      }
    },
    supplierId: function () {
      return this.detail.supplierId;
    },
    payMethodId: function () {
      return this.detail.paymentMethodId;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      searchHotelOrder(this.id, (val) => {
        this.detail = val;
      });
    },
    getStatusDesc: function (status) {
      return showHotelOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            return;
          }
          updateHotelOrderRemark(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    cancelOrder: function () {
      this.modalTitle = "请输入取消订单的理由：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            this.showErrMsg("请填写取消订单的理由");
            return;
          }
          cancelHotelOrder(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editSupplier: function () {
      this.$refs.updateSupplierModal
        .modal(this.supplierId)
        .then((info) => {
          const supplierId = info.supplierId;

          updateHotelOrderSupplier(this.id, { supplierId }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch(() => {});
    },
    editPayment: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          const paymentMethodId = info.payMethodId;
          updateHotelOrderPayment(this.id, { paymentMethodId }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPrice: function () {
      this.$refs.hotelUpdatePriceModal
        .modal(
          this.detail.price,
          this.detail.bottomPrice,
          this.detail.serviceCharge
        )
        .then((v) => this.doUpdatePrice(v))
        .catch(() => {});
    },
    doUpdatePrice: function (v) {
      const params = {
        price: v.price,
        cost: v.cost,
        serviceCharge: v.serviceCharge,
      };

      updateHotelOrderPrice(this.id, params, (v) => this.commonShowMessage(v));
    },
    submitOrder: function () {
      submitHotelOrder(this.id, (v) => this.commonShowMessage(v));
    },
    approveOrder: function () {
      this.$refs.confirmModal
        .modal("酒店订单审批")
        .then((v) => {
          this.showLoading("处理中");
          const params = {
            denyCode: v.denyCode,
            denyReason: v.denyReason,
          };
          approveHotelOrder(
            this.id,
            params,
            (v) => this.commonShowMessage(v),
            () => this.hideLoading()
          );
        })
        .catch((ex) => {});
    },
    updateChannel: function () {
      this.$refs.channelUpdateModal
        .modal(this.detail.reservationChannel)
        .then((v) => {
          this.showLoading("处理中");
          const params = {
            channel: v.channel,
          };
          updateHotelOrderChannel(
            this.id,
            params,
            (v) => this.commonShowMessage(v),
            () => this.hideLoading()
          );
        })
        .catch((ex) => {});
    },
    processOrder: function () {
      processHotelOrder(this.id, (v) => this.commonShowMessage(v));
    },
    finishOrder: function () {
      if (this.detail.reservationChannel === 0) {
        this.modalTitle = "请输入酒店确认单号：";
      } else {
        this.modalTitle = "请输入完成备注：";
      }
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          if (remark === "") {
            return;
          }
          finishHotelOrder(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    viewHistory: function () {
      searchHotelOrderHistory(this.id, (jsonResult) => {
        this.histories = jsonResult;
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("操作失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    rollbackStatus: function () {
      this.modalTitle = "确定回滚订单吗？请输入理由：";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          rollbackHotelOrderStatus(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
    checkAvail: function () {
      checkHotelAvail(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg);
        } else {
          this.showErrMsg("可定 " + v.desc);
        }
      });
    },
    getMealTypeDesc: function (type) {
      return showMealTypeDesc(type);
    },
    syncOrderDetail: function () {
      syncHotelOrderDetail(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg);
        } else {
          this.showErrMsg("成功 " + v.desc);
        }
      });
    },
    cancelSupplierOrder: function () {
      cancelSupplierHotelOrder(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg);
        } else {
          this.showErrMsg("成功 " + v.desc);
        }
      });
    },
    createSupplierHotelOrder: function () {
      createSupplierHotelOrder(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg);
        } else {
          this.showErrMsg("成功 " + v.desc);
        }
      });
    },
    showPriceCheckedStatus: function (status) {
      showPriceCheckedStatus(status);
    },
  },
};
</script>